<template>
  <div class="bg-white rounded-lg p-5 h-full flex flex-col">
    <div class="head_title" v-if="!detailForm.id">创建监测设备</div>
    <div class="head_title" v-else-if="detailForm.id && isEdit">编辑监测设备</div>
    <div class="head_title" v-else-if="detailForm.id && !isEdit">查看监测设备</div>
    <el-divider></el-divider>
    <div >
      <el-form :model="params"
               :disabled="detailForm.id && !isEdit"
               ref="expertForm"
               label-width="160px"
               :rules="rules"
               style="width: 400px;"
               size="small"
      >



            <el-form-item label="设备编码" prop="code">
              <el-input v-model="params.code" placeholder="请输入设备编码" />
            </el-form-item>



            <el-form-item label="设备名称" prop="name">
              <el-input v-model="params.name" placeholder="请输入设备名称" />
            </el-form-item>

            <el-form-item label="设备类型" prop="equipmentType">
              <el-select v-model="params.equipmentType" placeholder="请选择设备类型" style="width: 100%;" >
                <el-option
                    v-for="dict in dict.type.equipment_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>



            <el-form-item label="监测站点" prop="monitorSite">
              <el-input v-model="params.monitorSite" placeholder="请输入监测站点" />
            </el-form-item>



<!--
            <el-form-item label="监测单位" prop="unit">
              <el-input v-model="params.unit" placeholder="请输入监测单位" />
            </el-form-item>
-->

      </el-form>
    </div>
    <div class="flex p-20">
      <el-button @click="sureForm('expertForm')" type="primary" v-if="!detailForm.id || isEdit">确认提交</el-button>
      <el-button @click="isEdit = true" type="primary" v-if="detailForm.id && !isEdit">编辑</el-button>
      <el-button @click="show = false">返回</el-button>
    </div>
  </div>
</template>

<script>
  export default{
    dicts: ['equipment_type'],
    data () {
      return {
        params:{
            id: null,
            code: null,
            name: null,
            equipmentType: null,
            monitorSite: null,
            unit: null,
            createId: null,
            createBy: null,
            createTime: null,
            updateId: null,
            updateBy: null,
            updateTime: null,
            delFlag: null,
        },
        rules: {
          code: [
            { required: true, message: '请输入设备编码', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入设备名称', trigger: 'blur' },
          ],
          equipmentType: [
            { required: true, message: '请选择设备类型', trigger: 'blur' },
            {
              min: 1,
              max: 10,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ],
          monitorSite: [
            { required: true, message: '请输入监测站点', trigger: 'blur' },
          ]
        }
      }
    },
    props: {
      editVisible: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      detailForm: {
        type: Object,
        default: () => {
          return {}
        }
      },
      isEdit:{
        type:Boolean,
        default:()=>{
          return false
        }
      },
    },
    watch:{

    },
    computed: {
      show: {
        get () {
          return this.editVisible
        },
        set (val) {
          this.$emit('update:editVisible', val)
        }
      },
    },
    created () {
      if(this.detailForm.id){
        this.params = {...this.detailForm}
      }
    },
    methods: {
      // 确认
      sureForm(formName) {
        this.$refs [formName].validate((valid) => {
          if (valid) {
            if(this.detailForm.id){
              this.$emit('submitForm', this.params,this.detailForm.id)
            }else{
              this.$emit('submitForm', this.params)
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
    }

  }
</script>

<style scoped="scoped" lang="scss">
  .titile_txt{
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    line-height: 19px;
    margin-bottom: 15px;
  }
</style>
